<template>
  <el-card shadow="hover">
    <el-form label-width="100px">
      <el-form-item label="角色名称">
        <el-input disabled v-model="roleName"></el-input>
      </el-form-item>
      <el-form-item label="菜单权限列表">
        <!-- 
          :data="permissionList" 数据
          :props="{ 
            label: 'name', 显示文字的属性
            children: 'children' 子菜单列表的属性
          }"
          show-checkbox 添加复选框
          default-expand-all 默认展开所有菜单
          ref="treeRef" 获取组件实例对象，从而调用上面的方法
          node-key="id" 设置每个元素遍历的key属性取值
         -->
        <el-tree
          :data="permissionList"
          :props="{ label: 'name', children: 'children' }"
          show-checkbox
          default-expand-all
          ref="treeRef"
          node-key="id"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="assignRolePermissionList">
          保存
        </el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import {
  getRolePermissionListApi,
  assignRolePermissionListApi,
} from "@/api/acl/permission";
import type { PermissionList } from "@/api/acl/models/permissionModels";

defineOptions({
  name: "RoleAuth",
});

const router = useRouter();

const cancel = () => {
  router.push("/acl/role/list");
};

const assignRolePermissionList = async () => {
  // 得到选中key
  const checkedKeys = treeRef.value.getCheckedKeys();
  // 得到半选的key
  const halfCheckedKeys = treeRef.value.getHalfCheckedKeys();

  const permissionIdList = [...checkedKeys, ...halfCheckedKeys];

  await assignRolePermissionListApi(id, permissionIdList);

  ElMessage.success("分配角色权限列表成功");

  cancel();
};

const treeRef = ref();

const route = useRoute();
const roleName = ref(route.query.roleName as string);
const id = route.query.id as string;

const permissionList = ref<PermissionList>([]);

// 查找所有（最里层元素）select:true的元素的id
const findCheckedKeys = (permissionList: PermissionList) => {
  let checkedKeys: string[] = [];

  permissionList.forEach((permission) => {
    // if (permission.level === 4) {
    //   if (permission.select) {
    //     checkedKeys.push(permission.id);
    //   }
    // } else if (permission.children && permission.children.length) {
    //   const childrenCheckedKeys = findCheckedKeys(permission.children);
    //   checkedKeys = [...checkedKeys, ...childrenCheckedKeys];
    // }
    if (permission.children && permission.children.length) {
      const childrenCheckedKeys = findCheckedKeys(permission.children);
      checkedKeys = [...checkedKeys, ...childrenCheckedKeys];
    } else if (permission.select) {
      checkedKeys.push(permission.id as string);
    }
  });

  return checkedKeys;
};

onMounted(async () => {
  permissionList.value = (await getRolePermissionListApi(id)).children;
  const checkedKeys = findCheckedKeys(permissionList.value);
  treeRef.value.setCheckedKeys(checkedKeys);
});
</script>

<style scoped lang="scss">
.el-tree {
  width: 100%;
  text-align: left;
}
</style>
